<div class="global_form_popup">
<?php // echo $this->form->render($this) ; ?>
<input type="text" autocomplete="off" value="" id="to" name="to">
</div>
<style>
ul.message-autosuggest {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #BBBBBB;
    cursor: pointer;
    list-style: none outside none;
    margin: 0;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 300px;
    z-index: 50;
}

ul.message-autosuggest > li img {
    display: block;
    float: left;
    height: 25px;
    margin-right: 5px;
    width: 25px;
}

ul.message-autosuggest > li.autocompleter-choices .autocompleter-choice {
    line-height: 25px;
}
.autocompleter-choice {
    cursor: pointer;
}

ul.message-autosuggest > li.autocompleter-choices .autocompleter-choice {
    line-height: 25px;
}
.autocompleter-choice {
    cursor: pointer;
}

ul.message-autosuggest > li.autocompleter-choices {
    font-size: 0.8em;
}
ul.message-autosuggest > li + li {
    border-top-width: 1px;
}
ul.message-autosuggest > li {
    overflow: hidden;
    padding: 3px;
}
</style>

<script type="text/javascript">
en4.core.runonce.add(function() {
    new Autocompleter.Request.JSON('to', '<?php echo $this->url(array('module' => 'country', 'controller' => 'index', 'action' => 'suggest-manager','country_id'=>$this->country_id), 'default', true) ?>', {
        'minLength': 1,
        'delay' : 250,
        'selectMode': 'pick',
        'autocompleteType': 'message',
        'multiple': false,
        'className': 'message-autosuggest',
        'filterSubset' : true,
        'tokenFormat' : 'object',
        'tokenValueKey' : 'label',
        'injectChoice': function(token){
          if(token.type == 'user'){
            var choice = new Element('li', {
              'class': 'autocompleter-choices',
              'html': token.photo,
              'id':token.label
            });
            new Element('div', {
              'html': this.markQueryValue(token.label),
              'class': 'autocompleter-choice'
            }).inject(choice);
            this.addChoiceEvents(choice).inject(this.choices);
            choice.store('autocompleteChoice', token);
          }
          else {
            var choice = new Element('li', {
              'class': 'autocompleter-choices friendlist',
              'id':token.label
            });
            new Element('div', {
              'html': this.markQueryValue(token.label),
              'class': 'autocompleter-choice'
            }).inject(choice);
            this.addChoiceEvents(choice).inject(this.choices);
            choice.store('autocompleteChoice', token);
          }
            
        },
        onPush : function(){
          if( $('toValues').value.split(',').length >= maxRecipients ){
            $('to').disabled = true;
          }
        }
      });
});
</script>